<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'">
    <title>mproxy</title>
    <link rel="shortcut icon" href="./assets/logo.png">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="list-head">
        <h2 style="margin: 10px 0;">服务列表</h2>
        <div id="list"></div>
    </div>

    <div class="host">
        <label>名称：</label>
        <input id="hostName" type="text" placeholder="输入名称">
        <label>端口：</label>
        <input id="hostPort" type="number" minlength="2" maxlength="4" placeholder="输入端口">
        <button id="serviceStart" onclick="clickHandle.serviceStart()">启动</button>
        <button id="serviceClose" disabled onclick="clickHandle.serviceClose()">关闭</button>
        <button id="serviceNew" onclick="clickHandle.serviceNew()">新建</button>
        <button id="serviceDel" onclick="clickHandle.serviceDel()">删除</button>
        <button id="serviceDelAll" onclick="clickHandle.serviceDelAll()">删所有</button>
    </div>

    <div id="host"></div>

    <div class="proxy">
        <h3 class="proxy-head">路由设置</h3>

        <div>
            <label>路由：</label>
            <input id="proxyRoutePath" type="text" disabled placeholder="输入路由 * 代表所有">

            <label>模式：</label>
            <select id="proxyRouteMethod" name="method" disabled placeholder="请选择模式">
                <option value="*">全部</option>
                <option value="GET">GET</option>
                <option value="POST">POST</option>
                <option value="PUT">PUT</option>
                <option value="DELETE">DELETE</option>
            </select>

            <label>地址：</label>
            <input id="proxyRouteAddr" type="text" disabled placeholder="输入目标地址">
            <button id="addProxyRoute" disabled onclick="clickHandle.addProxyRoute()">添加</button>
        </div>

        <strong class="tip">
            例：/get -> https://postman-echo.com =>
            http://localhost/get ->https://postman-echo.com/get
        </strong>

        <h3 style="margin: 10px 0 10px;">规则列表</h3>
        <div id="routes"></div>
    </div>
</body>

<script src="./index.js"></script>

</html>